<template>
  <div>
    <ul class="hhh">
      <!-- 字段 行li-->
      <li class="jiti">
        <ul class="k">
          <li v-for="(s, d) in pagedata" :key="d" class="oi">
            {{ s }}
          </li>
          <li class="oi">
            <button class="tjsj" @click="zj">添加数据</button>
          </li>
        </ul>
      </li>
      <!-- 循环 行li -->
      <li class="jiti" v-for="item in arr1" :key="item.goods_id">
        <!-- 第二层循环 -->
        <ul class="k">
          <!-- 单个选项卡li -->
          <li v-for="(im, ix) in item" :key="ix">
            <imgs :w="im" class="sss"></imgs>
          </li>
          <li class="btn">
            <button class="tr">上传数据库</button>
            <button class="tr" @click="sc(9, item.goods_id)">删除</button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inp: 1,
      pagedata: [
        "goos_id",
        "goods_sonimg1",
        "goods_sonimg2",
        "goods_sonimg3",
        "goods_sonimg4",
        "goods_sonimg5",
        "goods_sonimg6",
        "goods_sonimg7",
      ],
    };
  },
  methods: {
    zj() {
      this.$emit("zhengjia", {
        goos_id: "空",
        goods_sonimg1: "空",
        goods_sonimg2: "空",
        goods_sonimg3: "空",
        goods_sonimg4: "空",
        goods_sonimg5: "空",
        goods_sonimg6: "空",
        goods_sonimg7: "空",
      });
    },
    sc(a, d) {
      this.$emit("shanchu", a, d);
    },
  },

  mounted() {},
  activated() {
    setTimeout(() => {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }, 5);
  },

  props: ["kz", "arr1"],
  components: {
    imgs: () => import("./imgs.vue"),
  },
};
</script>

<style lang=scss  scoped>
.hhh {
  list-style: none;
  width: 100%;
  height: 45px;
  li.jiti {
    width: 100%;
    height: 100%;
    background-color: rgb(248, 225, 225);
    border: 1px solid beige;
    .k {
      list-style: none;
      width: 100%;
      height: 100%;
      li.oi {
        width: 8%;
        height: 100%;
        background-color: rgb(243, 233, 242);
        float: left;
        text-align: center;
        font-size: 5px;
        line-height: 40px;
      }
    }
    .sss {
      width: 8%;
      height: 100%;
      background-color: rgb(243, 233, 242);
      float: left;
      text-align: center;
      font-size: 5px;
      overflow: hidden;
      white-space: nowrap;
      span {
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .tr {
      text-align: center;
      /* line-height: 100%; */
      margin-top: 10px;
      background-color: #fad4d4;
      /* background-color: brown; */
      text-align: center;
      overflow: hidden;
    }
    .btn {
      background-color: rgb(243, 233, 242);
      text-align: center;
      height: 100%;
    }
  }
}
</style>